<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>查看路径</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/newCourse.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <style>
        .app {
            float: left;
        }
    </style>

</head>

<body>
    <!--		<p>这里是添加页面页面</p>-->
    <!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
    <div id="app" class="container-fluid app">
        <template>
            <el-table :data="LearnMaps" stripe style="width: 100%">
                <el-table-column prop="name" label="学习地图名字" width="180">
                </el-table-column>
                <el-table-column  label="地图封面" width="180">
                    <template slot-scope="scope">

                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="scope.row.image"
                                    >
                            </el-image>

                    </template>
                </el-table-column>
                <el-table-column prop="description" label="学习地图简介" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini" type="txt" @click="show(scope.row)">查看
                        </el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row.id,scope.$index)">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[5,10,15,20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalNums">
                </el-pagination>
              </div>
        </template>

        <el-dialog title="学习地图内容" :visible.sync="dialogFormVisible" width="60%" center>
            <template>

                <el-table
                        :data="learnMapDetails"
                        style="width: 600px">
                    <el-table-column
                            prop="orderno"
                            label="序号">
                    </el-table-column>
                    <el-table-column
                            prop="route.name"
                            label="路径名字"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="route.description"
                            label="路径简介"
                            width="280">
                    </el-table-column>
                </el-table>
            </template>


            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    LearnMaps: [],
                    page:1,
                    totalNums:0,
                    pageSize:5,
                    storage:undefined,
                    token:"",
                    refreshToken:"",
                    url:"",
                    learnMapDetails:[],
                    dialogFormVisible:false


                }
            },
            created(){
                this.getToken();
                this.getLearnMaps();
            },
            methods:{
                getToken:function(){
                    this.storage=window.localStorage;
                    this.token=this.storage.getItem("token");
                    this.refreshToken=this.storage.getItem("refreshToken");
                },
                handleCurrentChange:function(page){
                    this.page=page;
                    this.getRoutes();
                },
                handleSizeChange:function(pageSize){
                    this.pageSize=pageSize;

                    this.getRoutes();
                },
                getLearnMaps:function(){
                    let data ={
                        "page":this.page,
                        "pageSize":this.pageSize
                    };
                    axios.post("/learnmap/findLearnMapsByPage",data,{
                        headers:{
							'Content-Type': 'application/json;charset=UTF-8',
							"token":this.token,
							"refreshToken":this.refreshToken
						}
                    }).then(res=>{
                        if(res.data.code == 200){
                            this.LearnMaps=res.data.data.data;
                            this.totalNums=res.data.data.totalNum;

                        }else if(res.data.code == 330){
                            alert("系统维护中");
                        }
                    })
                },
                show:function(learnMap){
                    let data={
                        "id":learnMap.id
                    };
                    axios.post("/learnmap/findLearnMapDetails",data,{
                        headers:{
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token":this.token,
                            "refreshToken":this.refreshToken
                        }
                    }).then(res=>{
                        if(res.data.code == 200){
                            this.dialogFormVisible=true;
                            this.learnMapDetails=res.data.data;
                        }
                    })
                },
                del:function (id,index) {
                    this.$confirm('此操作会删除该路径, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let data={
                            "id":id
                        }
                        axios.post("/learnmap/del",data,{
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                "token": this.token,
                                "refreshToken": this.refreshToken
                            }
                        }).then(res=>{
                            if(res.data.code ==200){
                                this.totalNums--;
                                this.learnMapDetails.splice(index,1);
                              this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }else if(res.data.code ==330){
                                this.$message({
                                    type: 'warning',
                                    message: '系统维护中!'
                                });
                            }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }

            }
        })
    </script>
</body>

</html>